<template>
  <div class="member-features">
    <h2 class="features-title">{{ title }}</h2>
    
    <div class="features-grid">
      <!-- 无广告体验 -->
      <div class="feature-card">
        <div class="feature-icon no-ads">
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
            <path d="M3 3h18v18H3V3zm16 14H5V5h14v12z" fill="#fff"/>
            <path d="M13 12c0 .55-.45 1-1 1s-1-.45-1-1V8h2v4z" fill="#ff6b6b"/>
          </svg>
        </div>
        <h3 class="feature-title">无广告浏览</h3>
        <p class="feature-description">畅享纯净的浏览体验，告别烦人的广告干扰，专注于内容本身。</p>
      </div>
      
      <!-- 内容发布特权 -->
      <div class="feature-card">
        <div class="feature-icon publish">
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
            <path d="M21 15v4c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-4M17 8l4 4m0 0l-4 4m4-4H3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <h3 class="feature-title">内容发布特权</h3>
        <p class="feature-description">提升内容发布数量上限，黄金会员每月10篇，铂金会员20篇，钻石会员无限制。</p>
      </div>
      
      <!-- 专属徽章 -->
      <div class="feature-card">
        <div class="feature-icon badge">
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="#fff"/>
          </svg>
        </div>
        <h3 class="feature-title">专属会员徽章</h3>
        <p class="feature-description">获得彰显身份的专属会员徽章，在个人主页和评论区展示您的会员身份。</p>
      </div>
      
      <!-- 内容曝光提升 -->
      <div class="feature-card">
        <div class="feature-icon exposure">
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="3" fill="#fff"/>
            <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" stroke="#fff" stroke-width="2"/>
          </svg>
        </div>
        <h3 class="feature-title">内容曝光提升</h3>
        <p class="feature-description">铂金会员内容曝光量提升30%，钻石会员提升100%，让更多用户看到您的内容。</p>
      </div>
      
      <!-- 专属客服 -->
      <div class="feature-card">
        <div class="feature-icon support">
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
            <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" stroke="#fff" stroke-width="2"/>
          </svg>
        </div>
        <h3 class="feature-title">专属客服通道</h3>
        <p class="feature-description">铂金及以上会员享受7x24小时专属客服支持，优先解决您的问题和需求。</p>
      </div>
      
      <!-- 积分奖励 -->
      <div class="feature-card">
        <div class="feature-icon points">
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="#fff"/>
            <path d="M12 6.75a.75.75 0 100-1.5.75.75 0 000 1.5z" fill="#ff6b6b"/>
            <path d="M12 18.75a.75.75 0 100-1.5.75.75 0 000 1.5z" fill="#ff6b6b"/>
            <path d="M4.5 11.75a.75.75 0 100-1.5.75.75 0 000 1.5z" fill="#ff6b6b"/>
            <path d="M19.5 11.75a.75.75 0 100-1.5.75.75 0 000 1.5z" fill="#ff6b6b"/>
            <path d="M7.5 15.75a.75.75 0 100-1.5.75.75 0 000 1.5z" fill="#ff6b6b"/>
            <path d="M16.5 15.75a.75.75 0 100-1.5.75.75 0 000 1.5z" fill="#ff6b6b"/>
            <path d="M7.5 8.75a.75.75 0 100-1.5.75.75 0 000 1.5z" fill="#ff6b6b"/>
            <path d="M16.5 8.75a.75.75 0 100-1.5.75.75 0 000 1.5z" fill="#ff6b6b"/>
          </svg>
        </div>
        <h3 class="feature-title">积分奖励</h3>
        <p class="feature-description">会员每月获得额外积分奖励，黄金会员50积分，铂金会员100积分，钻石会员200积分。</p>
      </div>
      
      <!-- 专属活动 -->
      <div class="feature-card">
        <div class="feature-icon events">
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
            <rect x="3" y="4" width="18" height="18" rx="2" ry="2" fill="#fff"/>
            <line x1="16" y1="2" x2="16" y2="6" stroke="#ff6b6b" stroke-width="2"/>
            <line x1="8" y1="2" x2="8" y2="6" stroke="#ff6b6b" stroke-width="2"/>
            <line x1="3" y1="10" x2="21" y2="10" stroke="#ff6b6b" stroke-width="2"/>
          </svg>
        </div>
        <h3 class="feature-title">专属活动优先参与</h3>
        <p class="feature-description">优先参与平台举办的各类线上线下活动，获得更多互动和交流机会。</p>
      </div>
      
      <!-- 平台分红 -->
      <div class="feature-card">
        <div class="feature-icon bonus">
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
            <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" stroke="#fff" stroke-width="2"/>
            <circle cx="12" cy="12" r="3" fill="#fff"/>
            <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" stroke="#fff" stroke-width="2"/>
          </svg>
        </div>
        <h3 class="feature-title">平台分红资格</h3>
        <p class="feature-description">钻石会员获得平台内容收益分红资格，根据贡献度分享平台收益。</p>
      </div>
      
      <!-- 定制化主页 -->
      <div class="feature-card">
        <div class="feature-icon custom">
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
            <path d="M3 19V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2zM8 12h8M8 8h8M8 16h4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <h3 class="feature-title">定制化个人主页</h3>
        <p class="feature-description">钻石会员可自定义个人主页布局、主题和功能模块，打造专属个性空间。</p>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: '会员特权详情'
  }
});
</script>

<style scoped>
.member-features {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.features-title {
  text-align: center;
  margin-bottom: 40px;
  color: #333;
  font-size: 28px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

.feature-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.feature-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.feature-icon.no-ads {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5253 100%);
}

.feature-icon.publish {
  background: linear-gradient(135deg, #4ecdc4 0%, #26a69a 100%);
}

.feature-icon.badge {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);
}

.feature-icon.exposure {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.feature-icon.support {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.feature-icon.points {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.feature-icon.events {
  background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

.feature-icon.bonus {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.feature-icon.custom {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.feature-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin: 0 0 12px 0;
}

.feature-description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .feature-card {
    padding: 20px;
  }
  
  .feature-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
  }
  
  .feature-title {
    font-size: 18px;
  }
}
</style>